<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学生信息管理</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
      姓名：<input type="text" class="uname" name="uname" /> 年龄：<input
        type="text"
        class="age"
        name="age"
      />
      性别:
      <select name="gender" class="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      薪资：<input type="text" class="salary" name="salary" /> 就业城市：<select
        name="city"
        class="city"
      >
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="曹县">曹县</option>
      </select>
      <button class="add">录入</button>
    </form>

    <h1>就业榜</h1>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>薪资</th>
          <th>就业城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
      </tbody>
    </table>

    <script>
      // 获取需要渲染的tbody元素
      const tbody = document.querySelector("tbody");
      // 获取form元素
      const form = document.querySelector('form');
      // 获取form里所有带name的元素
      const list = form.querySelectorAll('[name]')
      // 找本地存储里面查找是否有数据，如果有数据先进行渲染页面，如果没有数据，我们放一个空数组，用来存放数据
      let arr = JSON.parse(localStorage.getItem("unmaer")) || [
        // {
        //   uname: "萧炎",
        //   id: 1001,
        //   age: 18,
        //   sexual: "男",
        //   salary: 18000,
        //   city: "乌坦城",
        // },
        // {
        //   uname: "萧炎",
        //   id: 1001,
        //   age: 18,
        //   sexual: "男",
        //   salary: 18000,
        //   city: "乌坦城",
        // },
      ];

      // 封装渲染函数
      function apply(data) {
        // 用map数组方法遍历数组，并返回一个新的数组，接一下
        const numData = data.map(function (item,index) {
          // 创建模板字符串
          const ser = `
      <tr>
          <td>${item.id}</td>
          <td>${item.uname}</td>
          <td>${item.age}</td>
          <td>${item.sexual}</td>
          <td>${item.salary}</td>
          <td>${item.city}</td>
          <td>
            <a href="javascript:" data-id="${index}">删除</a>
          </td>
        </tr> 
      `
      // return返回这个模板字符串
      return ser
        });

        // 替换tbody里的文本，用innerHTML可以识别标签，join('')可以把数据转换成字符串，并且把数组力量的逗号删了
        tbody.innerHTML = numData.join('')
      }


      // 调用函数
      apply(arr);

      // 绑定form事件
      form.addEventListener('submit',function(e){
        // 阻止form事件的默认行为
        e.preventDefault()
        // 判断用户是否输入数据
        for(let i = 0 ; i < list.length ; i++){
          if(list[i].value === ''){
            return alert('请输入必填的项')
          }
        }


        obj = {
          id:arr[arr.length - 1]?.id +1 || 1,
          uname:list[0].value,
          age:list[1].value,
          sexual:list[2].value,
          salary:list[3].value,
          city:list[4].value
        }
        // 把收集到是对象push到数组里
        arr.push(obj)

        // 数组里的数据改变后，再调用函数渲染一遍
        apply(arr)
        // 把数组储存到本地
        // 先需要将复杂数据类型转换成JSON字符串，在存储到本地
        const rem = JSON.stringify(arr)
        localStorage.setItem('unmaer',rem)


        // 点击录入后清空input框里的内容
        this.reset()


      })

      // 用户事件委托来做删除
      tbody.addEventListener('click',function(e){
        // 判断是不是点击的a标签
        if(e.target.tagName === 'A'){
          const unmBer = e.target.dataset.id
          // 删除数组里对应的对象
          arr.splice(unmBer,1)
          // 上传到本地储存
          const rem = JSON.stringify(arr)
          localStorage.setItem('unmaer',rem)

          // 数据改变后重新调用渲染函数
          apply(arr)
        }
      })



    </script>
  </body>
</html>
